<template>
  <div>
    Home页面
    <hr />
    <h3>{{ $store.state.count }}</h3>
    <button @click="incr">+++++</button>
  </div>
</template>

<script>
import { getFilmsApi } from '../api/filmApi'
export default {
  // 刚进入到当前组件时触发的，它会比组件生命周期早
  // 它比独享要晚点，要比全局解析守卫要早点
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter')
    next()
  },

  // 此守卫专门给 动态路由参数切换所用 /xxx/:id

  // 离开当前组件时触发
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  },

  beforeCreate() {
    console.log('组件的生命周期')
  },
  beforeDestroy() {
    console.log('组件销毁')
  },
  // created beforeMount mounted
  async mounted() {
    // axios 返回的都是promise
    let ret = await getFilmsApi()
    console.log(ret)
    this.$store.commit('addFilms', ret.data.films)
  },

  methods: {
    incr() {
      // 参1：指令，mutations中的方法名
      // 参2: 传入给指令的参数
      this.$store.commit('setIncr', 10)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>